<template>
  <el-container class="app-container">
    <el-header class="app-header">
      <div class="header-content">
        <h1 class="app-title">
          <el-icon><Management /></el-icon>
          教师监考排考管理系统
        </h1>
        <div class="header-nav">
          <el-menu
            :default-active="$route.path"
            mode="horizontal"
            router
            background-color="transparent"
            text-color="#fff"
            active-text-color="#409EFF"
          >
            <el-menu-item index="/teachers">
              <el-icon><User /></el-icon>
              教师管理
            </el-menu-item>
            <el-menu-item index="/exams">
              <el-icon><Document /></el-icon>
              考试管理
            </el-menu-item>
            <el-menu-item index="/schedule">
              <el-icon><Calendar /></el-icon>
              排考管理
            </el-menu-item>
            <el-menu-item index="/export">
              <el-icon><Download /></el-icon>
              导出管理
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-header>
    
    <el-main class="app-main">
      <router-view />
    </el-main>
    
    <el-footer class="app-footer">
      <p>&copy; 2024 教师监考排考管理系统 - 智能化排考解决方案</p>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { Management, User, Document, Calendar, Download } from '@element-plus/icons-vue'
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
}

.app-title {
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 600;
}

.header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.app-main {
  padding: 20px;
  background: transparent;
}

.app-footer {
  background: rgba(0, 0, 0, 0.2);
  color: white;
  text-align: center;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.el-menu--horizontal) {
  border-bottom: none !important;
}

:deep(.el-menu-item) {
  border-bottom: none !important;
  transition: all 0.3s ease;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-menu-item.is-active) {
  background-color: rgba(64, 158, 255, 0.2) !important;
  border-bottom: 2px solid #409EFF !important;
}
</style>
